<template>
  <div class="real-time-data">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="position" label="位号" width="120"></el-table-column>
      <el-table-column prop="value" label="值" >
        <template #default="{ row }">
          <el-input v-model="row.value" type="number"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <div class="button-container">
      <el-button type="primary" @click="clearData">清空</el-button>
      <el-button type="primary" @click="setData">设置</el-button>
    </div>
  </div>
</template>

<script lang="ts">
interface TableDataItem {
  position: string;
  value: number;
}

export default defineComponent({
  setup() {
    const {proxy} = getCurrentInstance();
    let stepStemPuSet = ref(730);
    let stepStemPmSet = ref(730);
    let stepStemPdSet = ref(720);
    let stepCarrierSet = ref(7);
    let stepHydrogenSet = ref(0);
    let stepCarbonsSet = ref(0);


    const tableData = ref<TableDataItem[]>([
      {position: 'TC301-SV', name: "stepStemPuSet", value: stepStemPuSet.value},
      {position: 'TC302-SV', name: "stepStemPmSet", value: stepStemPmSet.value},
      {position: 'TC303-SV', name: "stepStemPdSet", value: stepStemPdSet.value},
      {position: 'FC301', name: "stepCarrierSet", value: stepCarrierSet.value},
      {position: 'FC302', name: "stepHydrogenSet", value: stepHydrogenSet.value},
      {position: 'FC303', name: "stepCarbonsSet", value: stepCarbonsSet.value},
    ])

    const clearData = () => {
      tableData.value.forEach(item => {
        item.value = 0;
      });
    }
    let table = ref({
      stepStemPu: stepStemPuSet.value,
      stepStemPm: stepStemPmSet.value,
      stepStemPd: stepStemPdSet.value,
      stepCarrier: stepCarrierSet.value,
      stepHydrogen: stepHydrogenSet.value,
      stepCarbons: stepCarbonsSet.value,
      stepWater: 0,
    })

    const setData = async () => {
      try {
        console.log("数据已成功发送到后台", table);
        await proxy.$api.PlcUrla['write'](table.value);
        console.log('数据已成功发送到后台');
      } catch (error) {
        console.error('发送数据到后台失败:', error);
      }
    }

    return {
      tableData,
      clearData,
      setData
    }
  }
})
</script>

<style scoped>
.real-time-data {
  padding: 0px;
}

.button-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>